<!--添加规格信息-->
<template>
<div>
     <a-form :model="item"  v-for="(item,index) in sukClass.data.suklist">
            <a-form-item :label="'规格项'+(index+1)" style="margin-bottom: 0;">
                 <a-select 
                    show-search
                    :token-separators="[',']"
                    :show-arrow="true" 
                    v-model:value="item.name" 
                    style="width:180px"
                    placeholder="请选择规格参数"
                    @change="sukClass.handleChange"
                    >
                      <template v-for="(o,i) in item.sukNam" >
                          <a-select-option
                                @click="sukClass.onSelect(o,index)" 
                                :value="o.name"
                                v-if="o.checked" 
                                >
                               {{o.name}}
                          </a-select-option>
                          </template>
                    </a-select>
                  <MinusCircleOutlined 
                    v-if="sukClass.data.suklist.length>1 && index>0"
                   class="dynamic-delete-button"
                    @click="sukClass.sukRemove(index)" />
              
            </a-form-item>
              <div style="border-bottom: 1px solid #E9E9E9;padding-bottom:10px;overflow: hidden;" v-if="item.eName">
                
                  <div class="check-all" v-if="item.valueList.length>0">
                      <a-checkbox
                        v-model:checked="item.checkAll"
                        :indeterminate="item.indeterminate"
                        @change="sukClass.onCheckAllChange($event,index)"
                      >
                        全选
                      </a-checkbox>
                    </div>
              
                  <div class="checkbox-group" v-for="(o,i) in item.valueList">
                      <a-checkbox 
                      calss="checkbox" 
                      v-model:checked="o.checked"
                      @change="sukClass.onCheckBox($event,index,i)">
                      </a-checkbox>
                      <a-input allowClear 
                        v-model:value="o.value" 
                        style="width:135px;margin-left:10px;"
                        placeholder="请输入规格值"
                        @blur="sukClass.onBlur($event,index,i)"
                        />
                      <span class="del" @click.stop="sukClass.onDel(index,i,o)">删除</span>
                  </div> 
                 
                    <a-tag color="#cd201f" 
                           class="tag" 
                           @click="sukClass.addSukValue(index)">
                           <template #icon><PlusOutlined /></template>添加规格值
                    </a-tag>

               </div>
      </a-form>
      <a-button type="primary" 
      v-if="sukClass.data.suklist[0].valueList.length>=1 && sukClass.data.suklist.length<2" 
      @click="sukClass.sukAdd(sukClass.data.suklist.length)">{{sukClass.data.suklist.length}}添加规格</a-button>
</div>
</template>
<script lang="ts">
import { defineComponent, watch } from "vue";
import { Button,Input,Form,TreeSelect,Select,Table,Popconfirm,Tag,Tooltip,Checkbox} from "ant-design-vue";
import { PlusOutlined, MinusCircleOutlined } from '@ant-design/icons-vue';

import {sukClass} from "@/modules/goods/addSuk.ts";
export default defineComponent({
  components: {
      [Button.name]:Button,
      [Input.name]:Input,
      [Table.name]:Table,
      [Popconfirm.name]:Popconfirm,
      [Form.name]:Form,
      [Form.Item.name]:Form.Item,
      [Select.name]:Select,
      [Checkbox.name]:Checkbox,
      [Checkbox.Group.name]:Checkbox.Group,
      [Tag.name]:Tag,
      [Tooltip.name]:Tooltip,
      [Select.Option.displayName]:Select.Option,
      [Select.OptGroup.displayName]:Select.OptGroup,
      PlusOutlined,
      MinusCircleOutlined
   },
  setup() { 
   return {
        sukClass
    };
  },
});
</script>
<style lang="scss" scoped>
.dynamic-delete-button {
  cursor: pointer;
  position: relative;
  top:2px;
  left:10px;
  font-size:20px;
  color: #999;
  transition: all 0.3s;
}
.dynamic-delete-button:hover {
  color: #777;
}
.dynamic-delete-button[disabled] {
  cursor: not-allowed;
  opacity: 0.5;
}
.tag{
  cursor: pointer;
  height: 30px;
  line-height:30px; 
  margin-left:10px;
  float:right 
}
.checkbox{
  margin:10px 0 !important; 
}
.checkbox-group{
   display:inline-block;
   margin:10px;
}
.del{
  margin:10px;
  display: inline;
  cursor:pointer;
}
.check-all{
   border-bottom:1px solid #E9E9E9;
   text-align: right;
   margin-bottom:10px;
}
</style>